<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
    <script src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <div id="container" style="min-width:450px;height:650px"></div>
</body>

<script>
    var myChart = echarts.init(document.querySelector("#container"));
    myChart.showLoading(); 

    $.get("weibo.json", function (weiboData) {
        myChart.hideLoading();

        Data = function(index){
            data = weiboData[index];
            var px = data[0]/1000;
            var py = data[1]/1000;
            var res=[[px,py]];

            for(var i=2;i<data.length;i+=2){
                var dx=data[i]/1000;
                var dy=data[i+1]/1000;
                var x=px+dx;
                var y=py+dy;
                res.push([x,y]);
                px=x;
                py=y;
            }
            return res;
        };

        myChart.setOption({
            backgroundColor: '#404a59',
            title : {
                text: '微博签到数据点亮中国',
                subtext: 'From ThinkGIS',
                left: 'center',
                top: 'top',
                textStyle: {
                    color: '#fff'
                }
            },
            legend: {
                left: 'left',
                data: ['强', '中', '弱'],
                textStyle: {
                    color: '#ccc'
                }
            },
            geo: {
                name:'强',
                map: 'china',
                type: 'scatter',
                emphasis: {
                    label: {
                        show: false
                    },
                    itemStyle: {
                        areaColor: '#2a333d'
                    }
                },
                itemStyle: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                }
            },
            series: [{
                name: '弱',
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 1,
                large: true,
                itemStyle: {
                    shadowBlur: 2,
                    shadowColor: 'rgba(37, 140, 249, 0.8)',
                    color: 'rgba(37, 140, 249, 0.8)'
                },
                data: Data(0)
            }, {
                name: '中',
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 1,
                large: true,
                itemStyle: {
                    shadowBlur: 2,
                    shadowColor: 'rgba(14, 241, 242, 0.8)',
                    color: 'rgba(14, 241, 242, 0.8)'
                },
                data: Data(1)
            }, {
                name: '强',
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 1,
                large: true,
                itemStyle: {
                    shadowBlur: 2,
                    shadowColor: 'rgba(255, 255, 255, 0.8)',
                    color: 'rgba(255, 255, 255, 0.8)'
                },
                data: Data(2)
            }]
        });
    });
</script>
</html>
